<template>
	<view>
		<view>
			<view class="signupPageHeadBackgroundClass">
				<image class="HeadBackgroundImgClass" :src="threeSubjectsSignupBackgroundImg"></image>
				<view class="curriculumBackgroundClass">
					<view class="titleClass">天赋开启课</view>
					<view class="curriculumFrameClass">
						<view v-for="(itme,index) in curriculumListData" :key="index" class="curriculumBoxCla" @tap="gocurriculumFun(itme)">
							<view class="bothSidesCla">
								<view>
									<image :src="itme.face_url" class="imgCla"></image>
								</view>
								<view style="margin-left: 15rpx;">
									<view class="curriculumTitleCla">{{itme.NewTitle}}</view>
									<view class="belowContentCla"> 
										<text class="moneyCla">￥{{itme.amout}}</text>
										<text class="distanceCla">{{itme.newDistance}}km</text>
									</view>
								</view>
							</view>
							<view style="height: 2rpx;width: 100%;background: #F5F5F5;margin: 10rpx 0;"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomButtonClass" v-if="isDisplay">
			<image class="bottomButtonImgClass" :src="purchaseButtonImg" @tap="activityPurchaseRequest"></image>
		</view>
	</view>
</template>
<script>
	export default {
		
		data() {
			return {
				threeSubjectsSignupBackgroundImg: "http://img.curiousmore.com/120770020770",
				latitude: "",
				longitude: "",
				curriculumListData: [],
				purchaseButtonImg: "http://img.curiousmore.com/21343752875",
				user_id: "",
				isDisplay: false
			}
		},
		
		methods: {
			
			rad(d) {
				return d * Math.PI / 180.0; 
			},
			
			getDistance(lat1, lng1, lat2, lng2) {
				let me = this
				var radLat1 = me.rad(lat1);
				var radLat2 = me.rad(lat2);
				var a = radLat1 - radLat2;
				var b = me.rad(lng1) - me.rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				var distance = s;
				var distance_str = "";
				if (parseInt(distance) >= 1) {
					distance_str = distance.toFixed(1) + "km";
				} else {
					distance_str = distance * 1000 + "m";
				}
				return s;
			},
			
			gocurriculumFun(itme) {
				uni.navigateTo({
					url: '/pages/World/classChannel/classChannel?curriculumId=' + itme.id
				})
			},
			
			threeSubjectsActivityListRequest() {
				this.$myRequest({
					url: "/masterSetPrice/queryActivityListPageByType",
					data: {
						pageSize: 10,
						currentPage: 1,
						status: 2,
						type: "experience_specials",
						latitude: this.latitude,
						longitude: this.longitude
					}
				}).then((val) => {
					val.data.forEach((itme) => {
						itme.NewTitle =  "【" + itme.course_num + "节" + "】" + itme.title
						itme.newDistance = Math.round(this.getDistance(itme.latitude,itme.longitude,this.latitude,this.longitude))
					})
					this.curriculumListData = val.data
				})
			},
			
			activityPurchaseRequest() {
				uni.login({
					success: res => {
						this.$myRequest({
							url: "/pay/payPre",
							data: {
								user_id: this.user_id,
								rcharge_type: "coupon_177",
								source: "teach_paypal",
								rcharge_abstract: "活动券购买",
								pay_type: "wx",
								rcharge_valid: res.code,
							},
							header: {
								'content-type' : 'application/json'
							},
							methed: "post"
						}).then((val) => {
							if(val.code == 0){
								let data = val.data
								uni.requestPayment({
								    provider: 'wxpay',
								    timeStamp: data.timeStamp,
								    nonceStr: data.nonceStr,
								    package: data.package,
								    signType: 'MD5',
								    paySign: data. paySign,
								    success: function (res) {
								        uni.showToast({
								        	title: "支付成功"
								        })
										uni.reLaunch({
											url:"/pages/Friend/hudong/hudong"
										})										
								    },
								    fail: function (err) {
								        uni.showToast({
								        	title: "取消支付",
											icon: "none"
								        })
								    }
								});
							}
						})
					}
				})
			}
		},
		
		onLoad() {
			try {
				this.longitude = uni.getStorageSync('storage_key').longitude
				this.latitude = uni.getStorageSync('storage_key').latitude
				this.threeSubjectsActivityListRequest()
				if(uni.getStorageSync('userif_list')){
					this.user_id = uni.getStorageSync('userif_list').user_id
					this.isDisplay = true
				}
			}catch(e){}
		}
		
	}
</script>
<style lang="scss" scoped>
	.signupPageHeadBackgroundClass {
		background: #FF9324;
		.HeadBackgroundImgClass {
			width: 750rpx;
			height: 707rpx;
		}
		.curriculumBackgroundClass {
			background: #FF9324;
			min-height: 600rpx;
			padding-bottom: 10rpx;
			.titleClass {
				color: #FFFFFF;
				font-size: 50rpx;
				font-weight: bold;
				letter-spacing: 1rpx;
				margin-left: 37rpx;
			}
			.curriculumFrameClass {
				width: 675rpx;
				margin: 37rpx;
				border-radius: 20rpx;
				background: #FFFBED;
				box-sizing: border-box;
				padding: 31rpx;
				margin-bottom: 180rpx;
				.curriculumBoxCla {
					margin-top: 25rpx;
					.bothSidesCla {
						display: flex;
						.imgCla {
							width: 150rpx;
							height: 150rpx;
							border-radius: 10rpx;
							border: 1rpx solid #F5F5F5;
						}
						.curriculumTitleCla {
							font-size: 28rpx;
							font-weight: bold;
						}
						.belowContentCla {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 350rpx;
							.moneyCla {
								color: red;
								font-size: 25rpx;
								font-weight: bold;
								margin-top: 15rpx;
							}
							.distanceCla {
								color: #C1C1C1;
								font-size: 23rpx;
								position: relative;
								top: 9rpx;
							}
						}
 					}
				}
 			}
		}
	}
	.bottomButtonClass {
		position: fixed;
		width: 750rpx;
		background: #CF7100;
		height: 170rpx;
		bottom: 0;
		line-height: 170rpx;
		text-align: center;
		.bottomButtonImgClass {
			width: 623rpx;
			height: 89rpx;
			vertical-align: middle;
			
		}
	}
</style>